<template>
  <a-spin :spinning="loading">
    <div>
      <a-row>
        <a-col :xl="6" :lg="6" >
          <a-form-item label="学院" class="toop-select">
            <a-select
              showSearch
              style="width: 100%"
              :allowClear="true"
              placeholder="请选择学院"
              v-model="queryParam.institute"
              @change="changeInstitute"
              :options="collegeList"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xl="7" :lg="6" >
          <a-form-item label="导员名称">
            <a-select
              showSearch
              style="width: 100%"
              :allowClear="true"
              placeholder="请选择导员名称"
              @change="changeAssistant"
              v-model="queryParam.assistantId"
              :options="assistantList"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xl="10" :lg="11">
          <div style="height: 40px;line-height: 40px;text-align: right">
            <a-button style="margin-right: 8px" @click="()=>{this.exportData('/record/exportSign', '潍坊学院通勤记录表')}">
              通勤记录导出
            </a-button>
            <a-button style="margin-right: 8px" @click="()=>{this.exportData('/record/exportTrace', '潍坊学院学生异常追踪表')}">
              学生异常追踪表
            </a-button>
            <a-button style="margin-right: 8px" @click="runExceptionCheck">运行异常分析</a-button>
          </div>
        </a-col>
      </a-row>
      <a-card style="width: 90%;margin:0 auto;margin-bottom: 20px" v-for="item in reportsList">
        <div slot="title" class="card-title">
          <span class="title">人员实时分布 </span>
          <div>
            <div class="line on"></div>
            <div class="line to"></div>
            <span class="ti-time">{{ item.timeScope }}</span>
          </div>
          <div class="date">
            <div class="line on date-item"></div>
            <div class="line to date-item"></div>
            <span class="ti-time date-item">{{ date }}</span>
          </div>
        </div>
        <a-row justify="space-between" class="listing" type="flex">
          <a-col :span="4">
            <div style="display: flex;align-items: center;justify-content: center;position: relative;top: 0px;left: 10px">
            <span class="text">总人数</span>
              <div>
                <a-popover title="总人数">
                  <template #content>
                    <p>弘德的学生总人数</p>
                  </template>
                  <img src="@assets/wenhao.png" alt="" width="20" height="20">
                </a-popover>
              </div>
            </div>
          </a-col>
          <a-col :span="4">
            <div style="display: flex;align-items: center;justify-content: center;position: relative;top: 0px;left: 10px">
              <span class="text">校区实时人数</span>
              <div>
                <a-popover title="校区实时人数">
                  <template #content>
                    <p>学生最新一次打卡地是潍坊学院的人数汇总</p>
                    <p>注：小于等于当前时间段的结束时间</p>
                  </template>
                  <img src="@assets/wenhao.png" alt="" width="20" height="20">
                </a-popover>
              </div>
            </div>
          </a-col>
          <a-col :span="5">
            <div style="display: flex;align-items: center;justify-content: center;position: relative;top: 0px;left: 10px">
              <span class="text">弘德实时人数</span>
              <div>
                <a-popover title="弘德书院实时人数">
                  <template #content>
                    <p>学生最新一次打卡地是弘德书院的人数汇总</p>
                    <p>右下角的数量代表未签到的学生数</p>
                    <p>注：小于等于当前时间段的结束时间</p>
                  </template>
                  <img src="@assets/wenhao.png" alt="" width="20" height="20">
                </a-popover>
              </div>
            </div>
          </a-col>
          <a-col :span="4">
            <div style="display: flex;align-items: center;justify-content: center;position: relative;top: 0px;left: 10px">
              <span class="text">异常人数</span>
              <div>
                <a-popover title="异常人数">
                  <template #content>
                    <p>根据异常处理逻辑得到</p>
                  </template>
                  <img src="@assets/wenhao.png" alt="" width="20" height="20">
                </a-popover>
              </div>
            </div>
          </a-col>
          <a-col :span="4">
            <div style="display: flex;align-items: center;justify-content: center;position: relative;top: 0px;left: 10px">
              <span class="text">签到记录</span>
              <div>
                <a-popover title="有效记录">
                  <template #content>
                    <p>所有学生打卡记录的汇总，可能存在重复学生</p>
                  </template>
                  <img src="@assets/wenhao.png" alt="" width="20" height="20">
                </a-popover>
              </div>
            </div>
          </a-col>
        </a-row>
        <a-row justify="space-between" class="num-name" type="flex">
          <a-col :span="4" class="text">
            {{ item.studentNum }}
          </a-col>
          <a-col :span="4">
            <a @click="toWfuNumm(item.wfuNum,item.timeScope)" class="text">{{ item.wfuNum }}</a>
          </a-col>
          <a-col :span="5">
            <div style="display: flex;justify-content: center;">
              <a @click="toHdNum(item.hdNum,item.timeScope)" class="text">{{ item.hdNum }}</a>
              <a @click="toNoSign(Number(item.studentNum - item.wfuNum - item.hdNum), item.timeScope)"><span
                class="add-text"> + {{ Number(item.studentNum - item.wfuNum - item.hdNum) }}</span></a>
            </div>
          </a-col>
          <a-col :span="4">
            <a @click="toErrorNum(item.errorNum, item.timeScope)" class="text err">{{ item.errorNum }}</a>
          </a-col>
          <a-col :span="4">
            <a @click="toSignInTotal(item.signNum,item.timeScope)" class="text record">{{ item.signNum }}</a>
          </a-col>
        </a-row>

      </a-card>
    </div>
  </a-spin>
</template>

<script>
import { reports } from '@api/wfuReport/wfuReport'
import { assistantList, collegeList } from '@api/base/wfuBase'
import {TableMixin} from "@/mixins/TableMixin";
import {runExceptionCheck} from "@api/wfuAlarm/wfuAlarm";

const moment = require('moment')

export default {
  name: 'Analysis',
  mixins: [TableMixin],
  data () {
    return {
      loading: false,
      date: '',
      queryParam: {},
      reportsList: [],
      assistantList: [],
      collegeList: []
    }
  },
  mounted () {
    assistantList(this.queryParam.institute).then(res => {
      this.assistantList = res.data
    })
    collegeList().then(res => {
      this.collegeList = res.data
    })
    this.init()
    this.date = moment().format('MMM Do')
    console.log('date', this.date)
  },
  methods: {
    runExceptionCheck() {
      runExceptionCheck().then(res => {
        if (res.code === 0) {
          this.$message.info("运行成功")
        } else {
          this.$message.warning("运行失败")
        }
      })
    },
    init () {
      this.loading = true
      reports(this.queryParam).then(res => {
        this.reportsList = res.data
        this.loading = false
      })
    },
    // 跳到签到记录
    toSignInTotal (num, time) {
      if (num < 1) {
        this.$message.warning('人数为0')
        return
      }
      var arr = time.split('~')
      this.$router.push({
        path: '/signInTotal/signInTotalView',
        query: {
          type: arr[1],
          assistantId: this.queryParam.assistantId,
          institute: this.queryParam.institute
        }
      })
    },
    toHdNum (num, time) {
      console.log("弘德");
      if (num < 1) {
        this.$message.warning('人数为0')
        return
      }
      var arr = time.split('~')
      this.$router.push({
        path: '/signInByTime/signInByTime',
        query: {
          type: arr[1],
          deviceGroup: '01',
          assistantId: this.queryParam.assistantId,
          institute: this.queryParam.institute
        }
      })
    },
    toWfuNumm (num, time) {
      if (num < 1) {
        this.$message.warning('人数为0')
        return
      }
      var arr = time.split('~')
      this.$router.push({
        path: '/signInByTime/signInByTime',
        query: {
          type: arr[1],
          deviceGroup: '02',
          assistantId: this.queryParam.assistantId,
          institute: this.queryParam.institute
        }
      })
    },
    toErrorNum (num, time) {
      if (num < 1) {
        this.$message.warning('人数为0')
        return
      }
      var arr = time.split('~')
      this.$router.push({
        path: '/processAlarm/processAlarm',
        query: {
          type: time,
          assistantId: this.queryParam.assistantId,
          institute: this.queryParam.institute
        }
      })
    },
    toNoSign (num, time) {
      if (num < 1) {
        this.$message.warning('人数为0')
        return
      }
      var arr = time.split('~')
      this.$router.push({
        path: '/noSignIn/notSignInReport',
        query: {
          type: arr[1],
          assistantId: this.queryParam.assistantId,
          institute: this.queryParam.institute
        }
      })
    },
    // 选择学院
    changeInstitute (e) {
      this.queryParam.institute = e
      this.queryParam.assistantId = undefined
      assistantList(this.queryParam.institute).then(res => {
        this.assistantList = res.data
      })
      this.init()
    },
    // 选择导员
    changeAssistant (e) {
      this.queryParam.assistantId = e
      this.init()
    }
  }
}
</script>

<style scoped>
.card-title {
  position: relative;
  text-align: left;
  display: flex;
  justify-content: space-between;
  height: 30px;
}

.title {
  font-size: 14px;
  height: 30px;
  line-height: 38px;
  color: #666a6d;
}

.date {
  position: absolute;
  top: 0px;
  right: 120px;
}

.date-item {
  background: #1890ff !important;
}

.line {
  width: 5px;
  height: 5px;
  background: #f28919;
}

.on {
  position: absolute;
  top: -10px;
  right: 5px;
}

.to {
  position: absolute;
  top: -10px;
  right: 90px;
}

.ti-time {
  position: absolute;
  top: -5px;
  right: 0px;
  font-size: 16px;
  width: 100px;
  border-radius: 0px 0px 5px 5px;
  padding: 2px;
  color: #fff;
  text-align: center;
  background: #f28919;
}

.add-text {
  color: #f28919;
  font-size: 20px;
  display: block;
  margin-left: 10px;
  line-height: 50px;
}

.listing {
  margin: 0 5%;
  font-family: "Microsoft Yahei";
  font-size: 18px;
}

.num-name {
  margin: 0 5%;
  font-size: 30px;
  font-family: "Microsoft Yahei";
  font-weight: bold;
}

.text {
  display: block;
  text-align: center;
  padding: 0 10px;
}

.err {
  color: #ed1b22;
}

.record {
  color: #00a74f
}

.toop-select {
  margin-left: 11%;
}

>>> .ant-card-head-title {
  padding: 10px 0 !important;
}

>>> .ant-form-item {
  display: flex;
}

>>> .ant-form-item-control {
  width: 220px;
}
</style>
